<template>
    <div class="licenseNo">
        <el-cascader
            v-model="shotName"
            :options="list"
            :props="{value: 'shortName', label: 'shortName'}"
            @change="handleChange"
            style="width: 160px"
        />
        <span style="padding:0 5px"> · </span>
        <el-input
            v-model="number"
            maxlength="6"
            @change="handleChange"
        ></el-input>
    </div>
</template>
<script setup>
import { defineProps, ref, watch } from 'vue';
import { licenseNoList } from './licenseNoList.js';

const emits = defineEmits(["licenseNoChange"]);
// 传入数据¸
let props = defineProps({
    licenseNo: {
        type: String,
        default: '',
    },
})
watch(() => props.licenseNo, () => {
    console.log(props.licenseNo, 'props.licensePlate')
    shotName.value[0] = props.licenseNo[0] || '湘'
    shotName.value[1] = props.licenseNo[1] || 'A'
    number.value = props.licenseNo.slice(2)
})
const list = ref(licenseNoList)
const shotName = ref(['湘', 'A'])
const number = ref('')
if (props.licenseNo) {
    shotName.value[0] = props.licenseNo[0]
    shotName.value[1] = props.licenseNo[1]
    number.value = props.licenseNo.slice(2)
}
const handleChange = (v) => {
    console.log(v, shotName.value[0])
    let licenseNo = shotName.value[0] + shotName.value[1] + number.value
    emits('licenseNoChange', licenseNo)
}


</script>
<style scoped>
.licenseNo {
    display: flex;
    flex-direction: row;
}
</style>